<template>
  <div>
    <h1>这是App根组件</h1>
    <hr>
    <todo-input @add="onAddNewTask"></todo-input>
    <!-- 使用todo-list组件 -->
    <todo-list class="mt-2" :list="tasklist"></todo-list>
    <todo-button v-model:active="activeBtnIndex"></todo-button>
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue'
import TodoInput from './components/TodoInput.vue'
import TodoButton from './components/TodoButton.vue'
export default {
  name:'MyApp',
  data(){
    return{
      todolist:[
        {id:1,task:'周一早晨9点开会',done:false},
        {id:2,task:'周一晚上8点聚餐',done:false},
        {id:3,task:'准备周三上午的演讲稿',done:true}
      ],
      nextId:4,
      // 激活的按钮的索引
      activeBtnIndex: 0
    }
  },
  components:{
    // 注册私有组件
    TodoList,
    TodoInput,
    TodoButton
  },
  methods:{
    onAddNewTask(taskname){
      // 向任务中新增任务信息
      this.todolist.push({
        id:this.nextId,
        task:taskname,
        done:false
      })
      this.nextId++
    }
  },
  computed:{
    tasklist(){
      switch(this.activeBtnIndex){
        case 0:
          return this.todolist
        case 1:
          return this.todolist.filter(x=>x.done)
        case 2:
          return this.todolist.filter(x=>!x.done)
      }
    }
  }
}
</script>

<style lang="less" scoped>
 
</style>